<template>
    <div class="index">
        <img class="logo" src="/static/img/home/logo.png" />
        <div>
            <div class="main">
                <div
                    class="main-item"
                    v-for="(item, index) in tabList"
                    :key="index"
                    @touchstart="touchstart(index)"
                    @touchend="touchend(item.path)"
                    @touchmove="touchMove"
                >
                    <img
                        class="main-item-img"
                        :src="
                            !(changeImage && currentIndex == index)
                                ? item.img
                                : item.clickImg
                        "
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabList: [
                {
                    name: "基本情况",
                    img: require("../../../static/img/home/1.png"),
                    clickImg: require("../../../static/img/home/11.png"),
                    path: "/jbqk"
                },
                {
                    name: "工程管理",
                    img: require("../../../static/img/home/2.png"),
                    clickImg: require("../../../static/img/home/22.png"),
                    path: "/gcgl"
                },
                {
                    name: "财务融资",
                    img: require("../../../static/img/home/3.png"),
                    clickImg: require("../../../static/img/home/33.png"),
                    path: "/cwrz"
                },
                {
                    name: "制度建设",
                    img: require("../../../static/img/home/4.png"),
                    clickImg: require("../../../static/img/home/44.png"),
                    path: "/zdjs"
                },
                {
                    name: "资产管理",
                    img: require("../../../static/img/home/5.png"),
                    clickImg: require("../../../static/img/home/55.png"),
                    path: "/zcgl"
                },
                {
                    name: "招标投标",
                    img: require("../../../static/img/home/6.png"),
                    clickImg: require("../../../static/img/home/66.png"),
                    path: "/zbtb"
                },
                {
                    name: "党风廉政",
                    img: require("../../../static/img/home/7.png"),
                    clickImg: require("../../../static/img/home/77.png"),
                    path: "/dflz"
                },
                {
                    name: "实时动态",
                    img: require("../../../static/img/home/8.png"),
                    clickImg: require("../../../static/img/home/88.png"),
                    path: "/ssdt"
                }
            ],
            changeImage: false,
            currentIndex: 0
        };
    },
    created() {
        console.log("this :>> ", this.$options.customOption);
        if (!this.$store.state.isCall) {
            this.call();
        }
    },
    methods: {
        touchstart(index) {
            this.currentIndex = index;
            this.changeImage = true;
        },
        touchend(path) {
            setTimeout(() => {
                this.changeImage = false;
                setTimeout(
                    () => this.$router.push({ path: "/main" + path }),
                    100
                );
            }, 200);
        },
        touchMove(e) {
            setTimeout(() => {
                this.changeImage = false;
            }, 200);
        },
        //统计
        async call() {
            const { code } = await this.$api.total.call();
            if (!code) {
                this.$store.commit("updateIsCall");
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.index {
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    background: url("/static/img/backgroun.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .logo {
        position: absolute;
        width: 320px;
        top: 95px;
        right: 80px;
    }
    .main {
        width: 630px;
        height: 515px;
        margin-top: 510px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .main-item {
            width: 300px;
            .main-item-img {
                width: 100%;
            }
        }
    }

    .inupt {
        position: relative;
        line-height: 50px;
        height: 50px;
        width: 380px;
        border-radius: 35px;
        background-color: #fff;
        padding-left: 20px;
        box-sizing: border-box;

        input {
            height: 50px;
            line-height: 50px;
            font-size: 25px;
        }
    }
}
</style>
